import * as React from 'react';
import { useState, useEffect } from 'react';
import { history } from 'umi';
import SearchLogo from '@/asset/search.png';
import './detail.less';

export default function detail(props: any) {
  console.log('不同版块传来的不同id', props.match.params.id);
  const [searchVal, setSearchVal] = useState('');
  const getSearchVal = () => {
    console.log(searchVal);
  };
  const [data, setData] = useState([
    {
      id: 1,
      msg: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
    },
    { id: 2, msg: 'BBBBBBBBBB' },
    { id: 3, msg: 'VVVVVVVVVV' },
    { id: 5, msg: 'CCCCCCCCCC' },
    { id: 6, msg: 'EEEEEEEEEE' },
    { id: 7, msg: 'FFFFFFFFFF' },
    { id: 8, msg: 'GGGGGGGGGG' },
    { id: 9, msg: 'HHHHHHHHHH' },
    { id: 10, msg: 'GGGGGGGGGG' },
    { id: 11, msg: 'HHHHHHHHHH' },
    { id: 12, msg: 'GGGGGGGGGG' },
    { id: 13, msg: 'HHHHHHHHHH' },
    { id: 14, msg: 'GGGGGGGGGG' },
    { id: 15, msg: 'HHHHHHHHHH' },
    { id: 16, msg: 'HHHHHHHHHH' },
    { id: 17, msg: 'accccccccc' },
  ]);
  return (
    <div className="detailBox">
      <div className="top">
        <input
          type="text"
          value={searchVal}
          onChange={(e) => setSearchVal(e.target.value)}
        />
        <button onClick={getSearchVal}>
          <img src={SearchLogo} alt="" />
          搜索
        </button>
      </div>
      <div className="content">
        {data.map((item: any, index: any) => {
          return (
            <div className="item" key={item.id}>
              <span>{index + 1}. </span>
              <p style={{ padding: 0 }}>{item.msg}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}
